<template>
  <div>
    <dtDialog
      title="数据同步配置"
      :visible.sync="dialogVisible"
      :is-loading="loading"
      width="1000px"
      :footer-slot="activeName=='topic'"
      @closeDialog="handleCancel"
      @comfirmBtn="onSubmit"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="配置topic" name="topic" />
        <el-tab-pane label="配置API" name="api" />
      </el-tabs>
      <topic-manage v-if="activeName=='topic'" ref="topicManageRef" />
      <api-manage v-if="activeName == 'api'" ref="apiManageRef" @closeDialig="closeDialig" />
    </dtDialog>
    <topic-config ref="topicConfigRef" />
  </div>
</template>
<script>
import apiManage from './apiManage.vue'
import topicManage from './topicManage'
import topicConfig from './topicConfig.vue'

export default {
  components: {
    topicConfig,
    topicManage,
    apiManage
  },
  data() {
    return {
      appId: '',
      activeName: 'topic',
      loading: false,
      dialogVisible: false,

      queryParamsApi: {

      },
      form: {
        priorityLevel: ''
      },
      rules: {

      },
      appList: []
    }
  },

  methods: {
    openDialog() {
      this.dialogVisible = true
      if (this.activeName == 'topic') {
        this.$nextTick(() => {
          this.$refs.topicManageRef.getAppTopicPage()
        })
      } else {
        this.$nextTick(() => {
          this.$refs.apiManageRef.getAppList()
        })
      }
    },
    handleCancel() {
      this.activeName = 'topic'
      this.$nextTick(() => {
        this.$refs.topicManageRef.queryParams = {
          pageSize: 10,
          pageNo: 1,
          appName: ''
        }
      })
    },
    handleClick() {
      if (this.activeName == 'api') {
        this.$nextTick(() => {
          this.$refs.apiManageRef.getAppList()
        })
      } else {
        this.$nextTick(() => {
          this.$refs.topicManageRef.getAppTopicPage()
        })
      }
    },
    onSubmit() {
      this.$refs.apiManageRef.handleConfirm()
    },
    closeDialig() {
      this.dialogVisible = false
    }

  }
}
</script>

